<template>
    <div class="modify_box" v-show="openModify">
        <div class="Modify_content">
            <p class="Modify_content_head">
                <span>修改</span>
                <span class="close" @click="handClose">关闭</span>
            </p>
            <hr/>

            <el-input type="textarea" v-model="context"></el-input>
            <el-switch
                v-model="done"
                active-color="#13ce66"
                inactive-color="#ff4949">
                </el-switch>
            <div class="modify_bottom">
                <div class="modify_bottom_botton">
                    <el-button type="danger" size="mini" @click="handlEmit">确认</el-button> 
                    <el-button type="info" size="mini" @click="handClose">取消</el-button>
                </div> 
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['openModify',"modifyData"],
    data(){
        return {
            context:"",
            done: false
        }
    },
    watch:{
        modifyData:{
            deep:true,
            immediate:true,
            handler(val) {
                console.log("val",val);
                this.context = val.context
                this.done = val.done
            }
        }
    },
   
    methods:{
        handClose(){
            this.$emit('handClose')
        },
        handlEmit(){
            let tempData = {
                ...this.modifyData,
                context: this.context,
                id: this.modifyData.id,
                done:this.done
            }
            this.$emit('handlEmit',tempData)
        }
    }
}
</script>
<style scoped>
    .modify_box{
        z-index: 100;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .Modify_content{
        min-width: 400px;
        min-height: 300px;
        position: absolute;
        border-radius: 20px;

        background-color: #ffffff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }
    .Modify_content_head {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .close{
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        background-color:red;
        color: white;
    }
    .close:hover{
        cursor: pointer;
    }
    .modify_bottom {
        position: fixed;
        bottom: 5px;
    }
    .modify_bottom_botton {
        width: 360px;
        display: flex;
        justify-content: center;
    }
</style>